<template>
  <view class="friendly-link">
    <view class="group" v-for="(group, gIdx) in linkGroups" :key="gIdx">
      <view class="group-title">{{ group.title }}</view>
      <view class="link-list">
        <view class="link-item" v-for="(item, idx) in group.links" :key="idx" @click="copyLink(item.url, item.name)">
          <image class="icon" src="../../static/ax.png" mode="aspectFit" />
          <view class="link-text">{{ item.name }}</view>
        </view>
      </view>
    </view>

	<!-- 复制成功弹窗 -->
	<view class="copy-success-popup" v-if="showCopySuccessPopup" @click="handleCloseCopySuccessPopup">
		<view class="popup-mask"></view>
		<view class="copy-success-content" @click.stop>
			<view class="success-icon">
				<image src="../../static/demo.png" mode="widthFix" />
			</view>
			<view class="success-title">复制成功</view>
			<view class="success-message">请用手机自带浏览器打开。</view>
			<view class="browser-guide">
				<view class="phone-frame">
					<view class="browser-icon browser-icon-1">
						<view class="browser-label">浏览器</view>
					</view>
					<view class="browser-icon browser-icon-2">
						<view class="browser-label">浏览器</view>
					</view>
					<view class="highlight-box"></view>
					<view class="highlight-arrow"></view>
				</view>
			</view>
			<view class="success-btn" @click="handleCloseCopySuccessPopup">
				<text class="btn-text">我知道了</text>
			</view>
		</view>
	</view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { copyToClipboard } from '@/utils/copy.js'
const showCopySuccessPopup = ref(false)
const linkGroups = ref([
  {
    title: '国家红十字会及公益类网站',
    links: [
      { name: '中国红十字会总会', url: 'https://www.redcross.org.cn/' },
      { name: '中国红十字基金会', url: 'https://www.crcf.org.cn/' },
      { name: '中国红十字会总会报刊社', url: 'http://www.redcrossol.com/' },
      { name: '南都公益基金会', url: 'http://www.naradafoundation.org/' },
      { name: '公益中国', url: 'http://www.pubchn.com/' },
      { name: '壹基金', url: 'http://www.onefoundation.cn/' },
      { name: '红十字运动研究中心', url: 'http://www.hszyj.net/' },
      { name: '中华骨髓库', url: 'http://www.cmdp.org.cn/' },
    ],
  },
  {
    title: '省内红十字会网站',
    links: [
      { name: '山东红十字会', url: 'http://www.sdredcross.org.cn/' },
      { name: '济南红十字会', url: 'http://www.jnredcross.org.cn/' },
      { name: '青岛红十字会', url: 'http://www.qdredcross.org.cn/' },
      { name: '淄博红十字会', url: 'http://zbhszh.com/' },
      { name: '枣庄红十字会', url: 'http://www.zaozhuangredcross.org.cn/' },
      { name: '东营红十字会', url: 'http://dyhsz.dongying.gov.cn/' },
      { name: '烟台红十字会', url: 'http://hszh.yantai.gov.cn/' },
      { name: '济宁红十字会', url: 'http://jnhsz.jiningdq.cn/' },
      { name: '威海红十字会', url: 'http://www.whredcross.org.cn/' },
      { name: '日照红十字会', url: 'http://www.rzredcross.org.cn/' },
      { name: '临沂红十字会', url: 'http://www.linyiredcross.org.cn/' },
      { name: '德州红十字会', url: 'http://dzhszh.dezhou.gov.cn' },
      { name: '滨州红十字会', url: 'http://hsz.binzhou.gov.cn' },
      { name: '菏泽红十字会', url: 'http://hzhh.heze.gov.cn/' },
    ],
  },
  {
    title: '枣庄市网站',
    links: [
      { name: '枣庄市政府', url: 'http://www.zaozhuang.gov.cn/' },
      { name: '枣庄文明网', url: 'http://www.sdzzwm.com/' },
    ],
  },
])

// 复制链接
const copyLink = (url, name) => {
  // 复制链接到剪贴板
  uni.setClipboardData({
    data: url,
	showToast: false,
    success: () => {
		uni.hideToast()
      showCopySuccessPopup.value = true
    }
  })
}

// 关闭复制成功弹窗
const handleCloseCopySuccessPopup = () => {
  showCopySuccessPopup.value = false
}
</script>

<style scoped>
.friendly-link {
  padding: 24rpx;
  background: #F6F6F6;
  min-height: 100vh;
}
.group {
  
}
.group-title {
  font-weight: bold;
  font-size: 28rpx;
  margin-bottom: 16rpx;
  line-height: 40rpx;
  color: rgba(0, 0, 0, 0.80);
}
.link-list {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 16rpx;
  border: 2rpx solid #E7E8EB;
  margin-bottom:24rpx;
  padding: 0 24rpx;
}
.link-item {
  display: flex;
  align-items: center;
  width: 56%;
  /* margin-right: 4%; */
  padding: 24rpx 0;
  border-bottom: 2rpx solid rgba(0, 0, 0, 0.09);
}
.link-item:nth-child(2n) {
  width: 44%;
}

/* 最后一行 link-item padding-bottom: 0 */
.link-item:last-child,
.link-item:nth-last-child(2):nth-child(2n+1) {
  border: none;
}

.icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 8rpx;
}
.link-text {
  color: #333;
  font-size: 15px;
  transition: color 0.2s;
}

</style>
